<!-- 特产菌库 -->
<template>
	<div>
		<common-header :tittle="tittle" :showmore="true" class="head"></common-header>
		<div class="page-content">

			<div class="box">
				<div class="cont">
					<!-- 特产标签 -->
					<specialtyLabel :label="labelArr" :tagType="tagType"> </specialtyLabel>
					<!-- 视频 -->
					<slideModule :moves="moves" :title="playerMoves"></slideModule>
					<!-- 人物 -->
					<slideModule :moves="character" :title="renwu"></slideModule>
					<!-- 专题 -->
					<div class="nav-fy">
						<h3>专题</h3>
						<swipe class="adver-swiper">
							<swipe-item class="slide1" v-for="(item,path,index) in adverListImg" :key="index">
								<router-link :to="{ path: item.path }">
									<img :src="item.imgSrc">
								</router-link>
							</swipe-item>
						</swipe>

					</div>

				</div>

				<!-- 体验 -->
				<imgText :tittle="experience" :items="items"></imgText>

				
			</div>
		</div>
	</div>
</template>

<script>
	import commonHeader from 'common/common-header'
	import imgText from 'common/imgText' //图文列表组件
	import slideModule from 'common/slideModule' //左右滑动模块
	import specialtyLabel from 'common/specialtyLabel' //特产标签
	import {
		Swipe,
		SwipeItem
	} from 'mint-ui';
	export default {
		data() {
			return {
				producTitle: '周边商城',
				playerMoves: "视频",
				renwu: "人物",
				tittle: '中信嘉丽泽',
				tagType: '基本信息',
				data: 0,
				experience: "体验",
				labelArr: [{
						title: "所在区域",
						path: '/information',
					},
					{
						title: "自然环境",
						path: '/information',
					},
					{
						title: "空气指数",
						path: '/airIndex',
					},
					{
						title: "项目特色",
						path: '/information',
					},
					{
						title: "项目规划",
						path: '/information',
					},
					{
						title: "户型",
						path: '/information',
					},

				],
		
				adverListImg: [{
						imgSrc: require('../../../assets/imgs/wenBrigade/banner1.jpg'),
						path: '/special',
					},
					{
						imgSrc: require('../../../assets/imgs/wenBrigade/banner2.jpg'),
						path: '/special',
					},
					{
						imgSrc: require('../../../assets/imgs/wenBrigade/banner3.jpg'),
						path: '/special',
					},
					
				],
				items: [{
						text: '《必由之路》第七集速览 解说词  第八集速览',
						num: '1000',
						imgSrc: require('../../../assets/imgs/wenBrigade/nav1.png'),
						link: "www.baidu.com",
					},
					{
						text: '受惠于港珠澳大桥及高铁开通 今年访港6000万受惠于港珠澳大桥及高铁开通 今年访港6000万',
						num: '1000',
						imgSrc: require('../../../assets/imgs/wenBrigade/nav2.png'),
						link: "www.baidu.com",
					},
					{
						text: '个税专项附加扣除办法有望出炉 首套房政策将明确',
						num: '1000',
						imgSrc: require('../../../assets/imgs/wenBrigade/nav3.png'),
						link: "www.baidu.com",
					}
				],
				moves: [{
						title: "嘉丽泽周边环境",
						imgSrc: require('../../../assets/imgs/wenBrigade/bg-imgs.png'),
						type: 1,
					},
					{
						title: "嘉丽泽公园",
						imgSrc: require('../../../assets/imgs/wenBrigade/bg-imgs2.png'),
					},
					{
						title: "嘉丽泽公园",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						type: 1,
					},

				],
				character: [
					{
						title: "嘉丽泽设计师",
						imgSrc: require('../../../assets/imgs/wenBrigade/timg.jpg'),

					},
					{
						title: "高尔夫球场设计师",
						imgSrc: require('../../../assets/imgs/wenBrigade/timg2.jpg'),
						type:1

					},
					{
						title: "游泳馆设计师",
						imgSrc: require('../../../assets/imgs/wenBrigade/timg3.jpg'),

					},
					

				]
			}
		},
		components: {
			commonHeader,
			swipe: Swipe,
			swipeItem: SwipeItem,
			imgText,
			slideModule,
			specialtyLabel
		},
		computed: {
			newdata: function() {
				return this.data + 1
			}
		},
		// 截取字符长度
		filters: {
			filterFun: function(value) {
				if(value && value.length > 25) {
					value = value.substring(0, 25) + '...';
				}
				return value;
			}
		},
		methods: {
			tohome() {
				this.$router.goBack()
			},
			add() {
				this.data++
			},
		}
	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	.tc-title {
		h3 {
			margin-top: 0px !important;
		}
	}
	.latestContents .content .nav-l p{
	}
	.header-box {
		z-index: 999;
	}
	.latestContents{
		border-bottom: 1px solid @border-color!important;
	}
	h3 {
		position: relative;
		text-indent: 8px;
		&:after {
			position: absolute;
			content: '';
			width: 4px;
			height: 15px;
			border-radius: 2px;
			background: @base-blue-color;
			left: 0;
			right: 0;
			top: 1px;
			margin-left: 0;
			margin-right: auto;
		}
		&:before {
			content: '';
			position: absolute;
			font-weight: bold;
			right: 0px;
			top: 0;
			color: #e5e5e5;
			height: 20px;
			width: 20px;
			background-size: 100% 100%;
			background-image: url('../../../assets/imgs/right-jt.svg');
		}
	}
	
	.box {
		position: relative;
		.cont {
			width: calc(100% - 30px);
			padding: 30px 15px 0 15px;
		}
		//专题
		.nav-fy {
			padding: 30px 0px 40px 0px;
			background: #ffffff;
			h3 {
				font-size: 15px;
				font-weight: bold;
				width: 100%;
				text-align: left;
				padding: 0px 0 25px 0px;
				margin-top: 20px;
				position: relative;
			}
		}
		// 体验
		.latestContents {
			border-bottom: 7px solid @border-color;
			padding: 0px 15px 20px 15px;
			margin-bottom: 50px;
			width: calc(100% - 30px);
			h3 {
				font-size: 17px;
				font-weight: bold;
				width: 100%;
				text-align: left;
				padding: 0px 0 20px 0px;
				margin-top: 20px;
				position: relative;
			}
			.content {
				font-size: 14px;
				padding: 0 0px;
				display: flex;
				margin-bottom: 20px;
				justify-content: space-between;
				.nav-l {
					text-align: left;
					.unfold {
						height: 50px;
					}
					p {
						&:first-child {
							line-height: 25px;
						}
						&:last-child {
							margin-top: 6px;
							font-size: 12px;
							display: flex;
							justify-content: space-between;
							color: #CCCCCC;
							span {
								text-align: right;
								padding-right: 25px;
								display: inline-block;
								&:last-child {
									position: relative;
									&:after {
										position: absolute;
										content: '';
										width: 14px;
										height: 10px;
										background: url('../../../assets/imgs/home_browse@2x.png');
										background-size: 100% 100%;
										vertical-align: middle;
										left: 0;
										right: -25px;
										display: inline-block;
										top: 0;
										bottom: 0;
										margin: auto;
									}
								}
							}
						}
					}
				}
				.nav-r {
					width: 111px;
					height: 73px;
					margin-left: 25px;
					height: 75px;
					border-radius: 5px;
					img {
						width: 111px;
						height: 73px;
						border-radius: 5px;
					}
				}
			}
		}
	}
	
	// 左右滑动模块
	// 视频
	.slide-module {
		text-align: left;
		background: #fff;
		padding: 30px 0 0px 0px;
		h3 {
			font-size: 17px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 0px 0 25px 0px;
			margin-top: 20px;
			position: relative;
		}
		//显示左右滚动的css样式
		ul {
			display: inline-block;
			white-space: nowrap;
			overflow-x: scroll;
			overflow-y: hidden;
			width: 100%;
			li {
				margin-right: 20px;
				display: inline-block;
				width: 138px;
				i {
					display: inline-block;
					width: 138px;
					height: 92px;
					border-radius: 5px;
					position: relative;
					img {
						border-radius: 5px;
						width: 100%;
						height: 100%;
					}
					span {
						position: absolute;
						width: 40px;
						height: 20px;
						bottom: 5px;
						right: 5px;
						text-align: center;
						line-height: 20px;
						color: #fff;
						background: @base-blue-color;
						border-radius: 10px;
					}
				}
				p.title {
					font-size: 15px;
					font-weight: bold;
					color: @base-black-color;
					padding: 10px 0;
				}
				p.type {
					margin-top: 6px;
					font-size: 12px;
					display: flex;
					justify-content: space-between;
					color: #CCCCCC;
					span {
						text-align: right;
						padding-right: 22px;
						display: inline-block;
						&:last-child {
							position: relative;
							&:after {
								position: absolute;
								content: '';
								width: 14px;
								height: 10px;
								background: url('../../../assets/imgs/home_browse@2x.png');
								background-size: 100% 100%;
								vertical-align: middle;
								left: 0;
								right: -20px;
								display: inline-block;
								top: 0;
								bottom: 0;
								margin: auto;
							}
						}
					}
				}
				span {
					font-size: 12px;
					font-weight: 500;
					color: @base-color-gray;
				}
			}
			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
	
	.commodity {
		padding: 0 15px;
		width: calc(100% - 30px);
		h4 {
			font-size: 17px;
			color: @base-black-color;
			text-align: center;
			font-weight: bold;
			display: inline-block;
			position: relative;
			margin-bottom: 40px;
			&:after {
				position: absolute;
				content: '';
				width: 15px;
				height: 4px;
				background: @base-blue-color;
				top: 0;
				left: 0;
				right: -97px;
				bottom: 0;
				margin: auto;
				border-radius: 2px;
			}
			&:before {
				position: absolute;
				content: '';
				width: 15px;
				height: 4px;
				background: @base-blue-color;
				top: 0;
				left: -97px;
				right: 0px;
				bottom: 0;
				margin: auto;
				border-radius: 2px;
			}
		}
		ul {
			flex-wrap: wrap;
			display: flex;
			justify-content: space-between;
			text-align: left;
			li {
				width: 155px;
				background: @base-list-black-color;
				margin-bottom: 20px;
				padding-bottom: 20px;
				.img {
					width: 100%;
					height: 150px;
					display: inline-block;
					margin-bottom: 10px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				p {
					padding: 0 10px;
					height: 20px;
					margin-top: 5px;
					white-space: nowrap;
					overflow: hidden;
					width: calc(100% - 20px);
					text-overflow: ellipsis;
					&.title {
						font-size: 15px;
					}
					&.num {
						font-size: 15px;
						span {
							font-size: 12px;
							font-weight: bold;
							&:first-child {
								font-size: 14px;
							}
						}
					}
				}
			}
		}
	}
</style>